import PropTypes from 'prop-types';
import React, { memo, useCallback, useState } from 'react';
import { SectionV2Wrapper } from './style';
import SectionHeader from '@/compoments/section-header';
import SectionRooms from '@/compoments/section-room';
import SectionTab from '@/compoments/section-tab';
import SectionFooter from '@/compoments/section-footer';

const HomeSectionV2 = memo((props) => {
  const { infoData } = props;
  // tabname
  const initialName = Object.keys(infoData.dest_list)[0];
  const [name, setName] = useState(initialName);

  // 数据转换
  const tabNames = infoData.dest_address?.map((item) => item.name);

  const tabClickHandle = useCallback((index, name) => {
    console.log(index, name);
    setName(name);
  }, []);
  return (
    <SectionV2Wrapper>
      <SectionHeader title={infoData.title} subTitle={infoData.subtitle} />
      <SectionTab tabNames={tabNames} tabClick={tabClickHandle} />
      <SectionRooms roomList={infoData.dest_list?.[name]} itemWidth="33.3333%" />
      <SectionFooter name={name} />
    </SectionV2Wrapper>
  );
});

HomeSectionV2.propTypes = {
  infoData: PropTypes.object,
};

export default HomeSectionV2;
